<!-- 课程内容 -->
<template>
    <div style="background-color: rgb(218 223 229 / 86%)">
        <!-- <TopBar /> -->

        <el-container class="common-layout">
            <el-aside class="asidebox" width="300px">
                <div class="outterbox">

                    <el-tree class="treestyle" ref="eltree" style="max-width: 600px" :data="listdata"
                        :props="defaultProps" :highlight-current="false" :default-expand-all="false"
                        @node-click="handleNodeClick" node-key="label" :current-node-key="currentkey">
                        <template #default="scope">
                            <div class="custom-node demo-progress"
                                :class="{ firstitem: scope.node.data.first == true }">

                                <!-- <Notebook v-if="scope.node.data.first == true" class="iconleft" /> -->
                                <!-- <div v-if="scope.node.data.first == true" class="catalog_num">
                                    <span><i><em style="font-style: normal">{{ scope.node.data.index }}</em></i></span>
                                </div> -->
                                <!-- <div v-if="scope.node.data.second == true" class="orangesection">
                                    <span class="orangefont">{{ scope.node.data.index }}</span>
                                </div> -->

                                <!-- word -->
                                <i class="classdocicon" v-if="scope.node.data.w == true">&#xe640;</i>
                                <!-- ppt -->
                                <i class="classdocicon" v-if="scope.node.data.ppt == true">&#xe643;</i>
                                <!-- pdf -->
                                <i class="classdocicon" v-if="scope.node.data.pdf == true">&#xe6c3;</i>
                                <!-- 教材 -->
                                <i class="classdocicon" v-if="scope.node.data.t == true">&#xe67d; </i>
                                <!-- 微课 -->
                                <i class="classdocicon" v-if="scope.node.data.v == true">&#xe813;</i>
                                <!-- 小测 -->
                                <i class="classdocicon" v-if="scope.node.data.test == true">&#xe63e;</i>
                                <!-- 仿真 -->
                                <i class="classdocicon" v-if="scope.node.data.task == true">&#xe615;</i>

                                <span class="labelspan">{{ scope.node.label }}</span>
                                <!-- <div class="progressbox" v-if="scope.node.data.third == true">
                        <el-progress :percentage="10" />
                    </div> -->
                            </div>
                        </template>
                    </el-tree>
                </div>
            </el-aside>
            <el-main class="mainbox m-30">
                <div class="righttitle">知识点资源</div>
                <el-tabs type="border-card" class="demo-tabs" v-model="curtab">
                    <el-tab-pane v-if="videolist.length !== 0" name="1">
                        <template #label>
                            <span class="custom-tabs-label">
                                <!-- <el-icon><calendar /></el-icon> -->
                                <!-- <span class="circle" :class="{ currentcircle: curtab == 'first' }"></span> -->
                                <span>视频</span>
                            </span>
                        </template>

                        <div class="videobox tabbody">
                            <div class="cataloguebox" v-show="videolist.length !== 0">
                                <p class="cataloguetitle">视频选集</p>
                                <ul class="catalogue" @click="chooseVideo($event)">
                                    <li :title="item.title" v-for="(item, index) in videolist" :key="index"
                                        :class="{ videochosen: vchosen == index }" :data-img='item.img'
                                        :data-index='index'>
                                        {{ item.title }}
                                    </li>
                                </ul>
                            </div>

                            <div class="videoViewer" id="dplayer" v-show="videolist.length !== 0"></div>
                            <noresource style="margin-top: 300px;" :fsize="60" v-show="videolist.length == 0">
                            </noresource>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane v-if="pptlist.length != 0" name="2">
                        <template #label>
                            <span class="custom-tabs-label">
                                <!-- <span class="circle" :class="{ currentcircle: curtab == 'second' }"></span> -->
                                <span>PPT</span>
                            </span>
                        </template>
                        <div class="tabbody" style="padding-top: 1px;">
                            <div class="cataloguebox" v-show="pptlist.length != 0">
                                <p class="cataloguetitle">PPT选集</p>
                                <ul style="width: 180px;" class="catalogue" @click="choosePPT($event)">
                                    <li :title="item.title" v-for="(item, index) in pptlist" :key="index"
                                        :class="{ videochosen: PPTchosen == index }" :data-img='item.img'
                                        :data-index='index'>
                                        {{ item.title }}
                                    </li>
                                </ul>
                            </div>
                            <div class="PPTViewer" id="resourcearea" v-show="pptlist.length != 0"></div>
                            <noresource style="margin-top: 309px;" :fsize="60" v-show="pptlist.length == 0">
                            </noresource>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane v-if="pdflist.length != 0" name="3">
                        <template #label>
                            <span class="custom-tabs-label">
                                <!-- <el-icon><calendar /></el-icon> -->
                                <!-- <span class="circle" :class="{ currentcircle: curtab == 'third' }"></span> -->
                                <span>PDF</span>
                            </span>
                        </template>
                        <div class="tabbody">
                            <div class="cataloguebox" v-show="pdflist.length != 0">
                                <p class="cataloguetitle">PDF选集</p>
                                <ul class="catalogue" @click="choosePDF($event)">
                                    <li :title="item.title" v-for="(item, index) in pdflist" :key="index"
                                        :class="{ videochosen: PDFchosen == index }" :data-img='item.img'
                                        :data-index='index'>
                                        {{ item.title }}
                                    </li>
                                </ul>
                            </div>
                            <div class="pdfbox" :class="{ PDFViewer: pdflist.length != 0 }">
                                <PDFViewer page-scale="page-fit" :width="1200" :height="pdflist.length != 0 ? 700 : 0"
                                    theme="dark" :src="pdfSrc" @loaded="onLoaded" />
                                <noresource style="margin-top: 310px;" :fsize="60" v-show="pdflist.length == 0">
                                </noresource>
                            </div>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane v-if="emulationlist.length != 0" name="4">
                        <template #label>
                            <span class="custom-tabs-label">
                                <span>仿真</span>
                            </span>
                        </template>
                        <div class="tabbody">
                            <ul style="padding-top: 1px;">
                                <li style="margin: 10px 20px;" v-for="(item, index) in emulationlist" :key="index">
                                    <el-button type="primary" @click="showTaskDialog(item.app_link)">{{ item.title
                                        }}</el-button>
                                </li>
                            </ul>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane v-if="testlist.length != 0" name="5">
                        <template #label>
                            <span class="custom-tabs-label">
                                <span>测验</span>
                            </span>
                        </template>
                        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                            <el-tab-pane v-for="(item, index) in testlist" :key="index" :label="item.title"
                                :name="`${item.id}`"></el-tab-pane>
                        </el-tabs>
                        <div class="tabbody rightmain" style="padding-top: 1px;">
                            <!-- <main class="rightmain"> -->
                            <!-- <div class="examtitle">低压电工基础知识测试</div>
                                <div class="examsum">
                                    <span>考试总分:100</span>
                                    <span>合格分数:60</span>
                                    <span>考试限时:120分钟</span>
                                </div> -->
                            <div v-show="hasExam" class="examblock">
                                <!-- 单选题 -->
                                <h5 class="h5typetitle" v-show="singleList.length !== 0">
                                    <!-- 一、单选题(共30题，60.0分) -->
                                    {{ `${chineseIndex.single}、单选题(共${singleList.length}题，${singleScore}分)` }}
                                </h5>
                                <ul class="questions">
                                    <li :id="'single' + index" v-for="(item, index) in singleList " :key="index">
                                        <div class="qtitle">
                                            <span>{{ index + 1 }}.</span>
                                            <span class="sorce">(单选题 {{ item.socre }}分)</span>
                                            {{ item.title }}
                                        </div>
                                        <div class="options">
                                            <el-radio-group v-model="item.originanswer" class="sigleoption"
                                                v-for="(answer, index2) in item.content_map " :key="index2"
                                                @change="uploadSingle(item.originanswer, item.section_id)">
                                                <el-radio :value="choices[index2]" size="large">{{ choices[index2]
                                                    }}.{{ answer
                                                    }}</el-radio>
                                            </el-radio-group>
                                        </div>
                                        <!-- <div class="explainbox">
                                            <div class="choice">
                                                <span>我的答案：A</span>
                                                <span class="correct">正确答案：{{ item.answer }}</span>
                                            </div>
                                            <p class="explaintip">
                                                知识点：<br>
                                                自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达
                                            </p>
                                        </div> -->
                                    </li>
                                </ul>

                                <!-- 多选题 -->
                                <h5 class="h5typetitle" v-show="multipleList.length !== 0">
                                    <!-- 二、多选题(共10题，50.0分) -->
                                    {{ `${chineseIndex.multiple}、多选题(共${multipleList.length}题，${multipleScore}分)` }}
                                </h5>
                                <ul class="questions">
                                    <li :id="'multiple' + index" v-for="(item, index) in multipleList" :key="index">
                                        <div class="qtitle">
                                            <span>{{ index + 1 }}.</span>
                                            <!-- <span class="sorce">(多选题 2.0分)</span> -->
                                            <span class="sorce">(多选题 {{ item.socre }}分)</span>
                                            {{ item.title }}
                                        </div>
                                        <div class="options">
                                            <el-checkbox-group v-model="item.originanswer" class="sigleoption"
                                                @change="uploadMultiple(item.originanswer, item.section_id)">
                                                <el-checkbox :label="choices[index2] + '.' + answer"
                                                    :value="choices[index2]"
                                                    v-for="(answer, index2) in item.content_map" :key="index2" />
                                                <!-- <el-checkbox label="B.资本主义萌芽正在迅速发展" value="B" /> -->
                                            </el-checkbox-group>
                                        </div>
                                        <!-- <div class="explainbox">
                                            <div class="choice">
                                                <span>我的答案：AEF</span>
                                                <span class="correct">正确答案：ABD</span>
                                            </div>
                                            <p class="explaintip">
                                                知识点：<br>
                                                自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达
                                            </p>
                                        </div> -->
                                    </li>
                                </ul>

                                <!-- 判断题 -->
                                <h5 class="h5typetitle" v-show="judgeList.length !== 0">
                                    {{ `${chineseIndex.judge}、判断题(共${judgeList.length}题，${judgeScore}分)` }}
                                </h5>
                                <ul class="questions">
                                    <li :id="'judge' + index" v-for="(item, index) in judgeList " :key="index">
                                        <div class="qtitle">
                                            <span>{{ index + 1 }}.</span>
                                            <span class="sorce">(判断题 {{ item.socre }}分)</span>
                                            {{ item.title }}
                                        </div>
                                        <div class="options">
                                            <el-radio-group v-model="item.originanswer" class="sigleoption"
                                                @change="uploadJudge(item.originanswer, item.section_id)">
                                                <el-radio value="1" size="large">正确</el-radio>
                                            </el-radio-group>
                                            <el-radio-group v-model="item.originanswer" class="sigleoption"
                                                @change="uploadJudge(item.originanswer, item.section_id)">
                                                <el-radio value="0" size="large">错误</el-radio>
                                            </el-radio-group>
                                        </div>
                                        <!-- <div class="explainbox">
                                            <div class="choice">
                                                <span>我的答案：A</span>
                                                <span class="correct">正确答案：{{ item.answer }}</span>
                                            </div>
                                            <p class="explaintip">
                                                知识点：<br>
                                                自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达
                                            </p>
                                        </div> -->
                                    </li>
                                </ul>

                                <!-- 填空题 -->
                                <h5 class="h5typetitle" v-show="fillinList.length !== 0">
                                    {{ chineseIndex['fillin'] + '、填空题' + '（' + fillinScore
                                        + '分）' }}
                                </h5>
                                <ul class="questions">
                                    <li :id="'fillin' + index" v-for="(item, index) in fillinList" :key="index">
                                        <div class="qtitle">
                                            <span>{{ index + 1 }}.</span>
                                            <span class="sorce">(多选题 {{ item.socre }}分)</span>
                                            {{ item.title }}
                                        </div>
                                        <div class="options" style="margin:20px 0px;">
                                            <div class="inputbox" v-for="(num, index3) in item.fillnum" :key="index3">
                                                <span class="indexbox">{{ index3 + 1 }}</span>
                                                <el-input v-model="item.originanswer[index3]" style="width: 340px"
                                                    placeholder="请输入"
                                                    @change="uploadFillin(item.originanswer, item.section_id)"
                                                    clearable />
                                            </div>
                                        </div>
                                        <!-- <div class="explainbox">
                                            <div class="choice">
                                                <span>我的答案：AEF</span>
                                                <span class="correct">正确答案：ABD</span>
                                            </div>
                                            <p class="explaintip">
                                                知识点：<br>
                                                自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达
                                            </p>
                                        </div> -->
                                    </li>
                                </ul>

                                <!-- 简答题 -->
                                <h5 class="h5typetitle" v-show="longfillList.length !== 0">
                                    {{ `${chineseIndex.longfill}、简答题(共${longfillList.length}题，${longfillScore}分)` }}
                                </h5>
                                <ul class="questions">
                                    <li :id="'longfill' + index" v-for="(item, index) in longfillList" :key="index">
                                        <div class="qtitle">
                                            <span>{{ index + 1 }}.</span>
                                            <span class="sorce">(简答题 {{ item.socre }}分)</span>
                                            {{ item.title }}
                                        </div>
                                        <!-- 简答题输入框 -->
                                        <div class="options" style="margin:20px 0px;">
                                            <el-input v-model="item.originanswer" style="width: 640px"
                                                :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入"
                                                @change="sendPicAnswer(index)" resize="none" />
                                        </div>

                                        <!-- 照片墙上传组件 -->
                                        <el-upload style="margin-top: 10px;" :ref="'uploadRef' + index" name="imgFile"
                                            :action="uploadUrl" :auto-upload="false" v-model:file-list="item.fileList"
                                            :limit="5" list-type="picture-card" :on-preview="handlePictureCardPreview"
                                            :before-upload="beforeAvatarUpload" :on-success="uploadSuccess"
                                            :on-change="handleFileChange" :on-error="onError" :on-exceed="overSize">
                                            <el-icon>
                                                <Plus />
                                            </el-icon>
                                        </el-upload>

                                        <!-- 照片提交按钮 -->
                                        <el-button style="margin-top: 10px;margin-bottom: 10px;" type="primary"
                                            @click="submitUpload(index)">确定提交</el-button>

                                        <!-- 答案解析 -->
                                        <!-- <div class="explainbox">
                                            <div class="choice">
                                                <span>我的答案：AEF</span>
                                                <span class="correct">正确答案：ABD</span>
                                            </div>
                                            <p class="explaintip">
                                                知识点：<br>
                                                自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达;自给自足的自然经济占主要地位；资本主义萌芽正在迅速发展；对外贸易占主导地位；城市商品经济发达
                                            </p>
                                        </div> -->
                                    </li>
                                </ul>
                            </div>
                            <!-- </main> -->
                            <noresource style="margin-top: 309px;" :fsize="60" v-show="!hasExam">
                            </noresource>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </el-main>
        </el-container>

        <!-- 仿真模态框 内嵌iframe打开仿真 -->
        <el-dialog :show-close="false" v-model="dialogIframeVisible" :width="932" :height="648" @close="closeDialog">
            <template #header>
                <div class="dialogtitle">
                    <span>我是一个标题</span>
                    <div class="iconspan">
                        <i style="font-weight: 700;" title="全屏" @click="fullScreen">&#xe62c;</i>
                        <i @click="dialogIframeVisible = false">&#xe65e;</i>
                    </div>
                </div>
            </template>
            <iframe ref="myIframe" id="myIframe" width="900" height="648" :src="iframeURL" frameborder="no"
                scrolling="no"
                sandbox="allow-forms allow-scripts allow-same-origin allow-top-navigation allow-popups allow-pointer-lock"></iframe>
        </el-dialog>
    </div>

</template>

<script setup>
import { ref, onMounted, inject, reactive, watch } from 'vue'

// 引入无资源标示组件
import noresource from '@/components/index/noresource.vue';


// 导入请求路径
import api from '@/request/api'
// 注入网络请求方法
const axios = inject('axios')

// 加载user模块 以及底下变量
import { storeToRefs } from 'pinia'
import useStore from '@/store'
const { user } = useStore()
let { username, avatar, uid } = storeToRefs(user)

// 初始化路由实例
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

// 获取路由参数
const { lessonId } = history.state

// 定义树形结构的读取属性名
const defaultProps = {
    children: 'children',
    label: 'label'
}

const eltree = ref(null)
let currentkey = ref('')

// tab栏默认选项
let curtab = ref('1')

// 列表的所有数据
// let listdata = ref([])
let listdata = reactive([])

// 声明视频实例
import DPlayer from 'dplayer'
let dp

// pdf文件路径
let pdfSrc = ref('')

// 是否有测验或者小测
let hasExam = ref(true)

// 资源存储数组
let videolist = ref([])
let pptlist = ref([])
let pdflist = ref([])
let emulationlist = ref([])
let testlist = ref([])

// 当前测验的eid
let eid = 0

// 模态框显示标识
const dialogIframeVisible = ref(false)

let myifame

// 用于展示当前跳转资源
let sourceIndex = route.query.source
let sourceId = route.query.sourceid
// 记录知识点标签、知识点ID、课件资源序号
let keyLabel = route.query.label
let keyId = route.query.keyid

onMounted(async () => {
    await getCourses(route.query.courseid)
    // console.log(route.query.courseid);
    // console.log(route.query.label);
    // console.log(route.query.keyid);
    // console.log(route.query.source);
    // console.log(route.query.sourceid);


    // 设置目录当前节点
    eltree.value.setCurrentKey(keyLabel, true)

    // 设置视频播放器
    // await setVideoPlayer()

    // 请求当前知识点课件
    await loadDocument(keyId)

    // 设置资源tab栏目
    curtab.value = route.query.source

})

// **********************************课程目录************************************
// 请求课程所有章节知识点列表
async function getCourses(lessonId) {
    let res = await axios.post(api.lessonlistall, {
        id: lessonId
    })

    // 成功请求且数据长度不为零 进行格式化
    if (res.code == 0 && res.data) {

        res.data.reverse().map((item1, index1) => {
            item1.label = item1.content
            item1.index = index1 + 1
            item1.first = true
            item1.children = item1.section_map.map((item2, index2) => {
                item2.label = item2.title
                item2.index = index2 + 1
                item2.second = true
                item2.children = item2.keyword_map.map((item3, index3) => {
                    item3.label = item3.title
                    item3.index = index3 + 1
                    item3.third = true
                    delete item3.title
                    return item3
                })
                delete item2.title
                delete item2.sort
                delete item2.keyword_map
                return item2
            })
            delete item1.content
            delete item1.title
            delete item1.img
            delete item1.sort
            delete item1.status
            delete item1.section_map
            return item1
        })
    }

    console.log(res.data)

    // reactive必须用这个方法进行赋值
    Object.assign(listdata, res.data)
}

// 树形结构点击节点回调
const handleNodeClick = async (data, node) => {
    // 点击知识点节点
    if (data.third) {
        // 如果点击同一个知识点 不会重新请求
        if (keyLabel == data.label) return

        // 使用知识点ID请求
        loadDocument(data.id)
        // 覆盖原值 用于判断
        keyLabel = data.label
        return
    }
}

// 加载课件
async function loadDocument(keyId) {
    let res = await axios.post(api.coursedocumentlist, {
        key_id: keyId,
        // status: 1 
    })

    // 如果课件列表长度等于0 直接返回
    if (res.data.length == 0) { return showMessage('warning', '该知识点暂无更多课件') }

    // 定义缓存数组
    let temvideo = []
    let temppt = []
    let tempdf = []
    let tememulation = []
    let temtest = []

    console.log('res.data', res.data);

    // 设置到知识点资源各个tab  
    res.data.forEach(item => {
        console.log(item.ctype, item.img);

        switch (item.ctype) {
            case 1:
                temvideo.push(item)
                break;
            case 2:
                temppt.push(item)
                break;
            case 3:
                tempdf.push(item)
                break;
            case 4:
                tememulation.push(item)
                break;
            case 5:
                temtest.push(item)
                break;
            default:
                break;
        }
    });

    videolist.value = temvideo
    pptlist.value = temppt
    pdflist.value = tempdf
    emulationlist.value = tememulation

    // 获取仿真列表
    emulationlist.value = await getEmulationList()

    // 检索知识点下的测验和小测
    let examlist = await axios.post(api.exammylist, {
        uid: uid.value,
        key_id: keyId,
        status: 1
        // ctype: 1, // 1测验 2小测 3考试
    })

    // console.log(examlist);
    if (examlist.code == 0 && examlist.data.length != 0) {
        testlist.value = examlist.data
    } else {
        hasExam.value = false
    }

    if (videolist.value.length > 0) {
        await setVideoPlayer()

        let sourceURL = videolist.value[0].img
        if (sourceIndex == 1) {
            videolist.value.some((item, index) => {
                if (item.id == sourceId) {
                    vchosen.value = index
                    sourceURL = item.img
                }
            });
        }
        // 暂时延迟 解决bug
        setTimeout(() => {
            setVideoSrc(sourceURL)
        }, 300);
    }
    if (pptlist.value.length > 0) {
        let sourceURL = pptlist.value[0].img
        if (sourceIndex == 2) {
            pptlist.value.some((item, index) => {
                if (item.id == sourceId) {
                    PPTchosen.value = index
                    sourceURL = item.img
                }
            });
        }
        preview(sourceURL, {}, '#resourcearea')
    }
    if (pdflist.value.length > 0) {
        let sourceURL = pdflist.value[0].img
        if (sourceIndex == 3) {
            pdflist.value.some((item, index) => {
                if (item.id == sourceId) {
                    PDFchosen.value = index
                    sourceURL = item.img
                }
            });
        }
        pdfSrc.value = sourceURL
    }
    if (emulationlist.value.length > 0) {
        console.log(1);
    }
    if (testlist.value.length > 0) {
        let currnetEid = testlist.value[0].id
        if (sourceIndex == 5) {
            currnetEid = sourceId
        }
        eid = currnetEid
        activeName.value = `${eid}`
        // 获取考题
        getExamQuestions(eid)
    }

}

// **********************************视频播放************************************
let vchosen = ref(0)

function chooseVideo(e) {
    let url = e.target.dataset.img
    let index = e.target.dataset.index
    // console.log(url);
    if (!url) return showMessage('error', '切换失败，请刷新页面重试')

    vchosen.value = index
    setVideoSrc(url)
}

async function setVideoPlayer() {
    dp = new DPlayer({
        container: document.getElementById('dplayer'),
        screenshot: true,
        hotkey: false,
        timeScheduleAdjust: 0,

        // 必须设置video属性 即便初始为空对象
        video: {},
        // video: {
        //   url: 'http://img.ele.gzzxue.com/assets/testvideo.mp4',
        //   pic: 'http://img.ele.gzzxue.com/assets/testpic.png',
        //   thumbnails: 'http://img.ele.gzzxue.com/assets/testpic.png'
        // },
        playbackSpeed: ['无倍速'],
        danmaku: false
    })

    dp.on('error', function (err, errr) {
        console.log(err)
        console.log(errr)
    })

    // 监听视频播放时刻
    // 变量不能用const声明 会随视频变更
    let videoTime = 0
    // 指定时刻，单位为秒
    const specificTime = 5
    dp.on('timeupdate', function (e) {
        // 当前时刻
        var videoCurrentTime = dp.video.currentTime
        if (videoCurrentTime - videoTime > 0.5) {
            dp.seek(videoTime)
            dp.notice('禁止快进', 2000)
        }

        // 作用：到达视频某时刻 弹出题目答题
        // 需用时刻范围 后期再加上题目完成标识判断
        if (videoCurrentTime >= specificTime && videoCurrentTime <= specificTime + 0.4) {
            console.log('视频已播放到指定时刻！', specificTime)

            // 暂停视频 弹出题目
            // dp.pause()
        }

        videoTime = videoCurrentTime
    })
}

function setVideoSrc(videosrc) {
    let source = {
        url: videosrc,
        pic: '',
        thumbnails: ''

        // url: 'http://img.ele.gzzxue.com/assets/testvideo.mp4',
        // pic: 'http://img.ele.gzzxue.com/assets/testpic.png',
        // thumbnails: 'http://img.ele.gzzxue.com/assets/testpic.png'
    }

    dp.switchVideo(source, {})
}
// **********************************PPT************************************
let PPTchosen = ref(0)

function choosePPT(e) {
    let url = e.target.dataset.img
    let index = e.target.dataset.index
    // console.log(url);
    if (!url) return showMessage('error', '切换失败，请刷新页面重试')

    PPTchosen.value = index
    preview(url, {}, '#resourcearea')

}
function preview(src, ops, target) {
    // var xurl = 'https://view.xdocin.com/view?src='
    var xurl = 'https://view.officeapps.live.com/op/view.aspx?src='

    xurl += encodeURIComponent(src)

    if (ops) {
        for (var a in ops) {
            xurl += '&' + a + '=' + encodeURIComponent(ops[a])
        }
    }

    if (target) {
        var parent = null

        if (typeof target == 'string') {
            parent = document.querySelector(target)
        } else if (target instanceof Element) {
            parent = target
        }

        if (parent) {
            parent.innerHTML = ''

            var ele = document.createElement('iframe')
            // 为这个新元素添加ID
            ele.id = 'iframeEle'

            var att = document.createAttribute('frameborder')

            att.value = '0'

            ele.setAttributeNode(att)

            att = document.createAttribute('style')

            att.value = 'width:100%;height:100%;'

            ele.setAttributeNode(att)

            parent.appendChild(ele)

            att = document.createAttribute('src')

            att.value = xurl

            ele.setAttributeNode(att)

            return
        }
    }

    window.open(xurl)
}
// **********************************PDF************************************
import PDFViewer from '@/components/doc/PDFViewer.vue'
let PDFchosen = ref(0)
function choosePDF(e) {
    let url = e.target.dataset.img
    let index = e.target.dataset.index
    // console.log(url);
    if (!url) return showMessage('error', '切换失败，请刷新页面重试')

    PDFchosen.value = index
    pdfSrc.value = url
}

function onLoaded(pdfApp) {
    console.log('loaded app:', pdfApp)
}

// **********************************仿真************************************

// iframe标签网址
let iframeURL = ref('')

// 获取仿真列表
async function getEmulationList(lesson_id) {
    let res = await axios.post(api.emulationmylist, {
        uid: uid.value,
    })

    console.log(res);
    if (res.code == 0) {
        return res.data ? res.data : {}
    } else return {}
}

// 打开仿真
function showTaskDialog(url) {
    url += `?uid=${uid.value}`
    console.log('iframeURL', url);

    iframeURL.value = url
    dialogIframeVisible.value = true
}

// 弹出框关闭回调
function closeDialog() {
    console.log('关闭');
}

// 仿真全屏
function fullScreen() {
    // 获取 iframe标签
    myifame = document.querySelector('#myIframe');

    // 兼容浏览器
    if (myifame.requestFullscreen) {
        myifame.requestFullscreen();
    } else if (myifame.mozRequestFullScreen) { // Firefox
        myifame.mozRequestFullScreen();
    } else if (myifame.webkitRequestFullscreen) { // Chrome, Safari and Opera
        myifame.webkitRequestFullscreen();
    } else if (myifame.msRequestFullscreen) { // IE/Edge
        myifame.msRequestFullscreen();
    }
}

// **********************************小测************************************
// 选项符号
let choices = ref(['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L'])
let activeName = ref('0')

// 4类题目的展示数组
let singleList = ref([])   // 单选
let multipleList = ref([]) // 多选
let fillinList = ref([])   // 填空
let longfillList = ref([]) // 简答
let judgeList = ref([])    // 判断

// 各类题目总分值
let singleScore = ref(0)   // 单选
let multipleScore = ref(0) // 多选
let fillinScore = ref(0)   // 填空
let longfillScore = ref(0) // 简答
let judgeScore = ref(0)    // 判断

let chineseIndex = ref({})
// 考卷详情
let examdetail = ref({})

function handleClick(tab, event) {
    // console.log(tab.props.name)
    let eid = tab.props.name
    getExamQuestions(eid)

}

// 获取考题列表
async function getExamQuestions(examid) {
    let params = {
        pid: examid,
    }

    let res = await axios.post(api.exambindlist, params)

    let single = []   // 单选
    let multiple = [] // 多选
    let fillin = []   // 填空
    let longfill = [] // 简答
    let judge = [] // 判断

    // 分值
    let singleSco = 0   // 单选
    let multipleSco = 0 // 多选
    let fillinSco = 0   // 填空
    let longfillSco = 0 // 简答
    let judgeSco = 0    // 判断

    // 匹配 _ 列出填空题对应数量的输入框
    var regex = /_{1,5}/g;

    if (res.code == 0 && res.data.length != 0) {
        console.log('exammylist', res.data)
        res.data.forEach(item => {
            switch (item.ctype) {
                // 单选
                case 1:
                    singleSco += item.socre
                    item.originanswer = ''   // 输入源答案
                    single.push(item)
                    break;
                // 多选
                case 2:
                    multipleSco += item.socre
                    item.originanswer = []   // 输入源答案
                    multiple.push(item)
                    break;
                // 填空
                case 4:
                    fillinSco += item.socre
                    item.originanswer = []   // 输入源答案
                    item.fillnum = item.title.match(regex)
                    fillin.push(item)
                    break;
                // 判断
                case 5:
                    judgeSco += item.socre
                    item.originanswer = []   // 输入源答案
                    judge.push(item)
                    break;
                // 简答
                case 6:
                    longfillSco += item.socre
                    item.fileList = []       // 定义附带图片数组
                    item.originanswer = ''   // 输入源答案
                    longfill.push(item)
                    break;
                default:
                    break;
            }
        });

        // console.log(single, multiple, fillin, longfill);
        singleList.value = single
        multipleList.value = multiple
        fillinList.value = fillin
        longfillList.value = longfill
        judgeList.value = judge

        singleScore.value = singleSco   // 单选
        multipleScore.value = multipleSco // 多选
        fillinScore.value = fillinSco   // 填空
        longfillScore.value = longfillSco // 简答
        judgeScore.value = judgeSco    // 判断

        let temArr = [
            { label: 'single', score: singleSco },
            { label: 'multiple', score: multipleSco },
            { label: 'judge', score: judgeSco },
            { label: 'fillin', score: fillinSco },
            { label: 'longfill', score: longfillSco },
        ]
        let indexChinese = ['一', '二', '三', '四', '五']
        let index = 0
        temArr.forEach(item => {
            chineseIndex.value[item.label] = indexChinese[index]
            if (item.score > 0) {
                index++
            }
        });

        // 添加每一个简答题图片数组监测 用于处理删除图片时，更新该题答案
        // 
        longfillList.value.forEach(item => {
            // 监测父组件时限传值
            watch(() => item.fileList, (newval, oldval) => {

                let resetArr = []
                let img = ''
                let ReSend = true // 是否重新提交

                newval.forEach(item => {
                    // 上传但不提交 对象里没有response属性
                    if (!item.response) return ReSend = false

                    let url = item.response?.data?.url
                    if (url) {
                        resetArr.push(url)
                    }
                });

                // 如果是添加图片 因为还没有真正提交，所以不用重新提交答案 return即可
                if (!ReSend) return

                // 否则正常重新提交 包含简答题文字答案、图片答案
                if (resetArr.length != 0) {
                    img = resetArr.join(',')
                }
                uploadLongfill(item.originanswer, item.section_id, img)
            })
        });
    } else {
        showMessage('error', res.msg)
    }
}



// 提交单选
async function uploadSingle(answer, section_id) {
    let params = {
        exam_id: parseInt(eid),
        uid: uid.value,
        section_id,
        answer
    }
    let res = await axios.post(api.examattend, params)
    console.log(res);

    let ress = await axios.post(api.myscore, { uid: uid.value })
    console.log(ress);

}

// 提交判断
async function uploadJudge(answer, section_id) {
    let params = {
        exam_id: parseInt(eid),
        uid: uid.value,
        section_id,
        answer
    }
    let res = await axios.post(api.examattend, params)
    console.log(res);

    let ress = await axios.post(api.myscore, { uid: uid.value })
    console.log(ress);

}

// 提交多选
async function uploadMultiple(answer, section_id) {
    answer = answer.join('')
    let params = {
        exam_id: parseInt(eid),
        uid: uid.value,
        section_id,
        answer
    }
    let res = await axios.post(api.examattend, params)
    console.log(res);

    let ress = await axios.post(api.myscore, { uid: uid.value })
    console.log(ress);

}

// 提交填空
async function uploadFillin(answer, section_id) {
    let params = {
        exam_id: parseInt(eid),
        uid: uid.value,
        section_id,
        answers: answer
    }
    let res = await axios.post(api.examattend, params)
    console.log(res);

    let ress = await axios.post(api.myscore, { uid: uid.value })
    console.log(ress);

}

// 提交简答
async function uploadLongfill(answer, section_id, img) {
    let params = {
        exam_id: parseInt(eid),
        uid: uid.value,
        section_id,
        content: answer,
        img: img ? img : ''
    }
    let res = await axios.post(api.examattend, params)
    console.log(res);

    let ress = await axios.post(api.myscore, { uid: uid.value })
    console.log(ress);
}

let dialogImageUrl = ref('')
let dialogVisible = ref(false)
// 当前操作的简单题数组索引 用于提交和删除图片时判断
let curLongIndex = ref(0)
// 后端文件上传地址
let uploadUrl = ref('https://api.gzzxue.com/shop115/uploadfile')

// 只能用静态方法预设定义提交图片组件 假设简答题题目不多于20道 必须单独设置，否则无法单独调用所有组件
let uploadRef0 = ref(null)
let uploadRef1 = ref(null)
let uploadRef2 = ref(null)
let uploadRef3 = ref(null)
let uploadRef4 = ref(null)
let uploadRef5 = ref(null)
let uploadRef6 = ref(null)
let uploadRef7 = ref(null)
let uploadRef8 = ref(null)
let uploadRef9 = ref(null)
let uploadRef10 = ref(null)
let uploadRef11 = ref(null)
let uploadRef12 = ref(null)
let uploadRef13 = ref(null)
let uploadRef14 = ref(null)
let uploadRef15 = ref(null)
let uploadRef16 = ref(null)
let uploadRef17 = ref(null)
let uploadRef18 = ref(null)
let uploadRef19 = ref(null)

// 连带文字答案 一同提交简答题图片答案
const sendPicAnswer = (index) => {
    let tempObj = longfillList.value[index]
    let resetArr = []
    let img = ''

    tempObj.fileList.forEach(item => {
        // let url = item?.response?.data?.url // 全路径
        let url = item?.response?.data?.img  // 相对路径
        if (url) {
            resetArr.push(url)
        }
    });

    if (resetArr.length != 0) {
        img = resetArr.join(',')
    }

    // 重新提交简单题答案 包含简答题文字答案、图片答案
    uploadLongfill(tempObj.originanswer, tempObj.section_id, img)
}

const handlePictureCardPreview = (uploadFile) => {
    dialogImageUrl.value = uploadFile.url
    dialogVisible.value = true
}

function overSize() {
    showMessage('warning', '超出上传限制啦')
}

// 上传成功 回调
function uploadSuccess(a, b, c, id) {
    // console.log('上传成功', a, b, c, id)
    showMessage('success', '成功')
    sendPicAnswer(curLongIndex.value)
}

function onError(err) {
    console.log(err)
    showMessage('error', err)
}

// 手动调用 提交到服务器
const submitUpload = (index) => {
    // 设置当前操作的简答题索引 用于图片上传成功后，提交图片答案
    curLongIndex.value = index
    // uploadRef.value[0].submit()

    let uploadref
    switch (index) {
        case 0:
            uploadref = uploadRef0
            break;
        case 1:
            uploadref = uploadRef1
            break;
        case 2:
            uploadref = uploadRef2
            break;
        case 3:
            uploadref = uploadRef3
            break;
        case 4:
            uploadref = uploadRef4
            break;
        case 5:
            uploadref = uploadRef5
            break;
        case 6:
            uploadref = uploadRef6
            break;
        case 7:
            uploadref = uploadRef7
            break;
        case 8:
            uploadref = uploadRef8
            break;
        case 9:
            uploadref = uploadRef9
            break;
        case 10:
            uploadref = uploadRef10
            break;
        case 11:
            uploadref = uploadRef11
            break;
        case 12:
            uploadref = uploadRef12
            break;
        case 13:
            uploadref = uploadRef13
            break;
        case 14:
            uploadref = uploadRef14
            break;
        case 15:
            uploadref = uploadRef15
            break;
        case 16:
            uploadref = uploadRef16
            break;
        case 17:
            uploadref = uploadRef17
            break;
        case 18:
            uploadref = uploadRef18
            break;
        case 19:
            uploadref = uploadRef19
            break;
        default:
            uploadref = uploadRef0
            break;
    }
    uploadref.value[0].submit()
}


// 文件上传前的检查
const beforeAvatarUpload = (file) => {
    const isJPG = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp'].includes(file.type)
    const isLt2M = file.size / 1024 / 1024 < 5
    if (!isJPG) {
        ElMessage.error('上传头像图片只能是 JPG PNG GIF BMP 格式!')
    }
    if (!isLt2M) {
        ElMessage.error('上传头像图片大小不能超过 5MB!')
    }

    return isJPG && isLt2M
}

// 文件选择后的处理 
const handleFileChange = (file, ownfileList) => {
    if (!file.raw) {
        return
    }
    const reader = new FileReader() // 关键的FileReader
    reader.onload = (e) => {
        // previewUrl.value = e.target.result
        // console.log(e.target.result);
    }
    reader.readAsDataURL(file.raw)
}

// 考试结束回调
function timeOver() {
    console.log('考试结束');
}


// **********************************公用方法************************************
// 信息提示
const showMessage = (msgtype, msgstr) => {
    ElMessage({
        showClose: true,
        message: msgstr,
        type: msgtype,
        offset: 50
    })
}

// 模拟树形数据
let data = [
    {
        label: '第一章 电工基础',
        first: true,
        children: [
            {
                second: true,
                label: '1.电路与电工常用公式',
                children: [
                    {
                        label: '1.1.1电路基本概念',
                        w: true
                    }
                ]
            },
            {
                second: true,
                label: '2.电气图与识图',
                children: [
                    {
                        label: '1.2.1电路基本概念',
                        ppt: true
                    },
                    {
                        label: '1.2.2电流、电压、电阳及其关系',
                        w: true
                    },
                    {
                        label: '1.2.3欧姆定律及其应用',
                        v: true
                    },
                    {
                        label: '1.2.4电工与电功率',
                        task: true
                    }
                ]
            }
        ]
    },
    {
        label: '第二章 电工基础',
        first: true,

        children: [
            {
                second: true,
                label: 'Level two 2-1',
                children: [
                    {
                        label: 'Level three 2-1-1'
                    }
                ]
            },
            {
                second: true,
                label: 'Level two 2-2',
                children: [
                    {
                        label: 'Level three 2-2-1'
                    }
                ]
            }
        ]
    },
    {
        label: '第三章',
        first: true,

        children: [
            {
                second: true,
                label: 'Level two 3-1',
                children: [
                    {
                        label: 'Level three 3-1-1'
                    }
                ]
            },
            {
                second: true,
                label: 'Level two 3-2',
                children: [
                    {
                        label: 'Level three 3-2-1'
                    }
                ]
            }
        ]
    }
]

</script>


<!-- 左右框架样式 -->
<style scoped>
.common-layout {
    height: 100vh;
}

.returnIndex {
    position: relative;
    top: -260px;
    left: 70px;
    width: 130px;
    font-size: 20px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: #000;
    cursor: pointer;
}

.returnIndex::before {
    position: absolute;
    top: 5px;
    left: -30px;
    content: '\e84b';
    display: block;
    font-family: 'iconfont' !important;
    font-size: 14px;
    /* color: #000; */
}

.asidebox {
    position: relative;
    background-color: #f2f4f7;
}

.mainbox {
    background-color: #f2f4f7;
    border-radius: 10px;
}

.righttitle {
    font-size: 26px;
    font-weight: 700;
    color: #000;
    margin-bottom: 20px;
    /* background-color: deeppink; */
}
</style>

<!-- 左侧目录样式 -->
<style scoped>
.outterbox {
    position: relative;
}

.treestyle {
    background-color: #f2f4f7;
}

.custom-node {
    display: flex;
    align-items: center;
    width: 500px;
    height: 50px;
    /* margin: 0 6px; */
}

.iconleft {
    width: 20px;
    color: #4c4c4c;
    margin-right: 5px;
}

.iconright {
    width: 20px;
    color: #4c4c4c;
    margin-left: 5px;
}

.custom-node i {
    /* position: absolute;
    top: 0px;
    left: 0px; */
    display: block;
    /* line-height: 50px; */
    font-family: 'iconfont2' !important;
    font-size: 15px;
    cursor: pointer;
}

.demo-progress .el-progress--line {
    margin-bottom: 15px;
    /* max-width: 600px; */
}

.progressbox {
    width: 140px;
    height: 12px;
    margin-left: 10px;
}

.el-progress__text span {
    font-size: 12px !important;
}

.totalprogress {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    height: 30px;
}

.totalprogress .progress {
    width: 140px;
    height: 20px;
    margin-left: 10px;
}
</style>

<!-- 左侧目录样式 -->
<style>
:root {
    --tree_itembox_bgcolor: rgb(218 223 229 / 86%);
}

.el-tree {
    /* max-width: 950px !important; */
    max-width: 1500px !important;

}

.el-tree-node__content {
    box-sizing: content-box !important;
    min-height: 50px !important;
    /* background-color: green; */
    background-color: transparent;
    /* background-color: var(--tree_itembox_bgcolor); */
    margin: 6px 0px;
    /* margin: 0px 0px; */
}

.el-tree-node__content:hover {
    /* background-color: #fff; */
    background-color: rgba(0, 183, 255, 0.1);
}

.el-tree-node__content:hover .labelspan {
    color: rgb(0, 119, 255);
}

.el-tree-node__expand-icon {
    position: absolute;
    right: 30px !important;
}

.el-tree-node:focus>.el-tree-node__content {
    /* background-color: var(--tree_itembox_bgcolor) !important; */
    /* background-color: transparent !important; */
    /* background-color: rgba(0, 183, 255, 0.1); */

    background-color: rgba(0, 183, 255, 0.1) !important;
}


.firstitem .labelspan {
    font-size: 17px;
    font-weight: 700 !important;
}

.firstitem {
    width: 930px !important;
    width: 1500px !important;

    height: 50px;
    padding-left: 17px !important;
    /* background-color: var(--tree_itembox_bgcolor) !important; */
}

.classdocicon {
    margin-left: 30px;
    margin-right: 7px;
}

/*  除章容器别的更加挨近 让其他子节点的外边距为0 */
.el-tree-node__children .el-tree-node__content {
    margin: 0px 0px;
}
</style>

<!-- 左侧目录小灰点序号样式 -->
<style>
/* 章灰色序号图标 */
.catalog_num {
    position: relative;
    width: 20px;
    height: 20px;
    padding-left: 14px;
    /* background: #d0d5db; */
    border-radius: 10px;
    margin: 2px 15px 0 0;
}

.catalog_num>span {
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    min-width: 16px;
    width: 16px;
    height: 16px;
    padding: 4px;
    /* margin: -2px -4px 0 0; */
    /* background: #d0d5db; */
    display: block;
    border-radius: 20px;
}

.catalog_num>span>i {
    min-width: 12px;
    height: 16px;
    padding: 0 2px;
    line-height: 16px;
    /* background: #fff; */
    font-size: 13px;
    font-family: Arial;
    /* color: #a8a8b3; */
    color: #000;
    border-radius: 20px;
    display: block;
    text-align: center;
}

.catalog_num>span>i>em {
    font-style: normal;
}
</style>

<!-- 左侧目录小橘点样式 -->
<style>
/* 小节橙色序号图标 */
.orangesection {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    /* background-color: #fff; */
    background: #ffb04e;
    margin-left: 15px;
    margin-right: 10px;
}

.orangesection .orangefont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 12px;
    width: auto;
    padding: 0 6px;
    height: 22px;
    line-height: 22px;
    /* background: #ffb04e; */
    font-size: 11px;
    color: #ffffff;
    text-align: center;
    box-shadow: none;
}
</style>

<!-- tab样式 -->
<style scoped>
/* 右边标签框 */
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

/* .demo-tabs .custom-tabs-label {
    background-color: skyblue;
    color: #fff;
} */

.demo-tabs .custom-tabs-label .el-icon {
    vertical-align: middle;
}

.demo-tabs .custom-tabs-label span {
    vertical-align: middle;
    margin-left: 4px;
    font-size: 18px;
    /* color: #000; */
    font-weight: 500;
}

.circle {
    box-sizing: border-box;
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 4px;
    /* background-color: skyblue; */
    border: 1px solid skyblue;
}

.describe {
    display: flex;
    align-items: center;
    height: 30px;
    margin-bottom: 20px;
}

.currentcircle {
    background-color: skyblue;
    border: 0;
}

.behindbox i {
    display: block;
    font-family: 'iconfont2' !important;
    font-size: 16px;
    color: #afc5cc;
    margin-right: 10px;
}
</style>

<!-- 课程目录跳转后的样式设置 -->
<style>
.is-expanded .el-tree-node__children .is-current[role='treeitem'] {
    background-color: rgba(0, 183, 255, 0.1) !important;
}
</style>

<!-- 视频样式 -->
<style>
.tabbody {
    position: relative;
    box-sizing: border-box;
    height: 690px;
    /* background-color: pink; */
}

.videobox {
    padding: 30px;
    padding-top: 10px;
}

#dplayer {
    width: 82%;
    margin: 0 auto 20px;
}

.videoViewer {
    position: absolute;
    top: 10px;
    left: 80px;
}
</style>

<!-- PPT -->
<style scoped>
.preview-wrapper {
    width: 100%;
    height: calc(100% - 50px);
    overflow: hidden;
}

.preview-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

.tips {
    text-align: center;
    font-size: 30px;
    margin-top: 20px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#resourcearea {
    width: 70%;
    height: 100%;
    margin: 0 auto;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

.PPTViewer {
    position: relative;
    left: 50px;
}

.PDFViewer {
    position: relative;
    left: 80px;
}
</style>

<!-- PDF -->
<style scoped>
.pdfbox {
    width: 1200px;
    margin: 0 auto;
}
</style>

<!-- 测验 -->
<style scoped>
.rightmain {
    /* width: 1000px; */
    width: 100%;
    height: 690px;
    /* height: 660px; */
    /* background-color: #f2f4f7; */
    flex-grow: 0;
    padding: 0px 10px 0px;
    margin: 0 auto;
    /* margin-top: ; */
}
</style>


<!-- 答题区域 -->
<style scoped>
.examtitle {
    height: 30px;
    line-height: 30px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.examsum {
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

.examsum span {
    width: 140px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-weight: 600;
}

.examblock {
    /* height: 780px; */
    height: 640px;
    margin-top: 30px;
    overflow: scroll;
    overflow-x: hidden;
}

.h5typetitle {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
}

.questions li {
    display: block;
    margin-bottom: 50px;
}

.questions .qtitle {
    /* display: flex;
    align-items: center; */
    line-height: 22px;

}

.qtitle span {
    display: inline-block;
    height: 22px;
    line-height: 22px;
}

.qtitle span:nth-child(2) {
    width: 90px;
    text-align: center;
}

.qtitle .sorce {
    color: #ccc;
    font-size: 13px;
}

.options {
    margin-top: 10px;
    margin-bottom: 10px;
}

.sigleoption {
    display: flex;
    flex-direction: column;
}
</style>

<!-- 解析框 -->
<style scoped>
.explainbox {
    width: 98%;
    box-sizing: border-box;
    border: 1px solid #eee;
    border-left: 3px solid #ccc;
    border-right: 0;
    padding: 15px;
    padding-bottom: 30px;
    font-size: 13px;
}

.explainbox .choice {
    margin-bottom: 10px;
    font-weight: 700;
}

.explainbox .choice .correct {
    margin-left: 30px;
    color: #38ca9c;
}

.explainbox .explaintip {
    color: #888;
}
</style>

<!-- 填空题输入框 -->
<style scoped>
.inputbox {
    display: flex;
    align-items: center;
    margin: 10px 0px;
}

.inputbox .indexbox {
    width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    font-size: 12px;
    border: 1px solid #000;
    border-radius: 50%;
    margin-right: 6px;
}
</style>

<!-- 覆盖样式 -->
<style>
.sigleoption {
    align-items: flex-start !important;
}

.el-radio.el-radio--large {
    height: 30px;
}
</style>

<!-- 目录 -->
<style scoped>
.cataloguebox {
    position: absolute;
    max-height: 300px;
    top: 10px;
    left: 0px;
}

.cataloguetitle {
    padding-left: 5px;
    margin-bottom: 10px;
}

.catalogue {
    position: relative;
    max-height: 300px;
    /* top: 10px; */
    top: 0px;

    left: 0px;
    /* display: ; */
    width: 180px;
    /* background-color: skyblue; */
    background-color: #f1f2f3;
    overflow-y: auto;
    overflow-x: hidden;
    border-radius: 5px;
}

.catalogue li {
    box-sizing: border-box;
    display: block;
    width: 96%;
    height: 30px;
    line-height: 30px;
    margin: 5px auto;
    /* background-color: pink; */
    font-size: 12px;
    border-radius: 4px;
    padding-left: 6px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.catalogue li:hover {
    /* background-color: red; */
    color: #25c5ef;
}

.catalogue .videochosen {
    background-color: #ffffff;
    color: #25c5ef;
}
</style>

<!-- 弹出框 -->
<style>
/* .dialogstyle {
    padding: 0px !important;
} */

.dialogtitle {
    display: flex;
    justify-content: space-between
}

.dialogtitle i {
    display: block;
    font-family: 'iconfont' !important;
    font-size: 16px;
    color: #afc5cc;
    margin-right: 10px;
    cursor: pointer;
}

.iconspan {
    display: flex;
    width: 60px !important;
    justify-content: space-between;
    align-items: center;
}
</style>